<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('电子地图')"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
        /*去掉百度地图左下角logo*/
        .anchorBL a{
            display: none;
        }

        .anchorBL img{
            display: none;
        }

        .anchorBL span {
            display: none !important;
        }
        /*去掉百度地图左下角logo*/
    </style>
    <style>
        #loading{
            background-color: rgba(0, 43, 87, 0.33);
            height: 100%;
            width: 100%;
            position: fixed;
            z-index: 1;
            margin-top: 0px;
            top: 0px;
        }
        #loading-center{
            width: 100%;
            height: 100%;
            position: relative;
        }
        #loading-center-absolute {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 200px;
            width: 200px;
            margin-top: -100px;
            margin-left: -100px;
            -ms-transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);

        }
        .object{

            -moz-border-radius: 50% 50% 50% 50%;
            -webkit-border-radius: 50% 50% 50% 50%;
            border-radius: 50% 50% 50% 50%;
            position: absolute;
            border-top: 5px solid #FFF;
            border-bottom: 5px solid transparent;
            border-left:  5px solid #FFF;
            border-right: 5px solid transparent;

            -webkit-animation: animate 2s infinite;
            animation: animate 2s infinite;
        }


        #object_one{
            left: 75px;
            top: 75px;
            width: 50px;
            height: 50px;
        }

        #object_two{
            left: 65px;
            top: 65px;
            width: 70px;
            height: 70px;
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
        }

        #object_three{
            left: 55px;
            top: 55px;
            width: 90px;
            height: 90px;
            -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
        }
        #object_four{
            left: 45px;
            top: 45px;
            width: 110px;
            height: 110px;
            -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;

        }

        @-webkit-keyframes animate {


            50% {

                -ms-transform: rotate(360deg) scale(0.8);
                -webkit-transform: rotate(360deg) scale(0.8);
                transform: rotate(360deg) scale(0.8);
            }



        }

        @keyframes animate {

            50% {

                -ms-transform: rotate(360deg) scale(0.8);
                -webkit-transform: rotate(360deg) scale(0.8);
                transform: rotate(360deg) scale(0.8);
            }

        }

    </style>
    <!--    <title>电子地图</title>-->
</head>
<body class="gray-bg">

<div class="container-div" style="height: 8%">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>机构名称：</label>
                            <input name="deptId" type="hidden" id="treeId"/>
                            <input name="deptName" onclick="selectDeptTree()" id="treeName" type="text"
                                   placeholder="请选择归属机构" autocomplete="off">
                        </li>
                        <li>
                            <label>营销人员：</label>
                            <input id="userName" type="text" name="userName"/>
                        </li>
                        <li>
                            <label>商户类型：</label>
                            <select id="merchantType" name="merchantType" th:with="type=${@dict.getType('ecard_cust_type')}">
                                <option value="">所有</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"></option>
                            </select>
                        </li>
                        <li class="select-date">
                            <label>创建日期： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间" readonly
                                   name="params[startDate]"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" readonly
                                   name="params[endDate]"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="getLocation()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="allmap">
    <input type="hidden" id="tileIp" name="tileIp" th:value="${tileIp}"/>
    <input type="hidden" id="isClusterer" name="isClusterer" th:value="${isClusterer}"/>
</div>
<!--遮罩层-->
<div id="loading">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div class="object" id="object_four"></div>
            <div class="object" id="object_three"></div>
            <div class="object" id="object_two"></div>
            <div class="object" id="object_one"></div>
        </div>
    </div>
</div>
<!--<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>&lt;!&ndash;在线版引用js&ndash;&gt;-->
<script type="text/javascript" src="../../../static/js/apiv2.0.min.js" th:src="@{/js/apiv2.0.min.js}"></script><!--离线版引用js-->
<script type="text/javascript" src="../../../static/js/bmaplib.js" th:src="@{/js/bmaplib.js}"></script>
<script type="text/javascript" src="../../../static/js/TextIconOverlay_min.js" th:src="@{/js/TextIconOverlay_min.js}"></script>
<script type="text/javascript" src="../../../static/js/MarkerClusterer_min.js" th:src="@{/js/MarkerClusterer_min.js}"></script>
<script type="text/javascript" src="../../../static/js/BMapLib_TextIconOverlay.js" th:src="@{/js/BMapLib_TextIconOverlay.js}"></script>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    LayerHide();
    var prefix = "/ysqmap/info";
    var polygons = [];//存储区域划分多边形数组
    var map;
    var point;
    var labelArray = [];//区域标注集合
    var markers = [];//标注点集合
    var markerClusterer;//点聚合对象
    var center;//地图中心点坐标
    var inceptionlonLat;//地图中心点坐标拼接
    var zoom = 12;//地图缩放等级
    var pointArray = [];//坐标点标注集合
    var circle;//范围圈对象
    var markerRadius;//定义标注图标对象
    var defaultPointLon;//默认经度
    var defaultPointLat;//默认纬度
    var isCircleFlag = false //是否开启范围圈以及跟随范围圈移动的标注点，true：开启，false：关闭
    var areas = [];//网格经纬度集合
    var isClusterer = $('#isClusterer').val();//电子地图是否开启聚合点，0：开启，1：关闭
    // 页面加载时执行getLocation函数
    getLocation();

    /* 选择机构树 */
    function selectDeptTree() {
        var treeId = $("#treeId").val();
        var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
        var url = ctx + "system/dept/selectDeptTree/" + deptId;
        var options = {
            title: '选择部门',
            width: "380",
            url: url,
            callBack: doSub
        };
        $.modal.openOptions(options);
    }

    function doSub(index, layero) {
        var body = $.modal.getChildFrame(index);
        $("#treeId").val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        $.modal.close(index);
    }
    function getLocation() {
        LayerShow()
        polygons = [];
        labelArray = [];
        markers = [];
        pointArray = [];
        areas = [];
        // var outputPath = $('#tileIp').val() + '/tiles/';//地图瓦片所在的文件夹
        var outputPath = '/tiles/';//地图瓦片所在的文件夹
        var fromat = ".png";    //格式

        var tileLayer = new BMap.TileLayer();
        tileLayer.getTilesUrl = function (tileCoord, zoom) {
            var x = tileCoord.x;
            var y = tileCoord.y;
            var url = outputPath + zoom + '/' + x + '/' + y + fromat;
            console.log(url);
            return url;
        };
        var tileMapType = new BMap.MapType('tileMapType', tileLayer);

        //初始化地图
        map = new BMap.Map("allmap", {
            mapType: tileMapType,//离线版引用地图瓦片路径，在线版注掉此行
            minZoom: 12,//最小缩放级别
            maxZoom: 18 //最大缩放级别
        });// 创建地图实例

        //初始化默认点坐标
        getDefaultPoint()

        // point = new BMap.Point(116.76986, 35.565602);  //创建点坐标
        point = new BMap.Point(defaultPointLon,defaultPointLat);  //创建点坐标
        map.centerAndZoom(point, zoom);//初始坐标点以及地图缩放级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        //初始化商户信息数据集合
        var markerArr = [];

        //画出行政区划边界线
        getBoundary();

        //初始化获取商户信息
        getCommercial();

        //初始化商户标注点
        labelIcon('0');

        if (isClusterer == 0) {
            //初始化生成点聚合
            getMarkerClusterer();
        }

        //定义标注点
        var marker;

        //初始化默认点坐标
        function getDefaultPoint(){
            $.ajax({
                url: prefix + "/getDefaultPoint",
                type: 'post',
                data: {},
                async: false,
                success: function (data) {
                    defaultPointLon = parseFloat(data.data.mapCoordinate.split(',')[1]);
                    defaultPointLat = parseFloat(data.data.mapCoordinate.split(',')[0]);
                }
            });
        }

        //初始化获取商户信息
        function getCommercial(longitudeLatitude) {
            var deptId = $("#treeId").val();
            var userName = $("#userName").val();
            var merchantType = $("#merchantType").val();
            var startTime = $("#startTime").val();
            var endTime = $("#endTime").val();
            $.ajax({
                url: prefix + "/getCustDistribution",
                type: 'post',
                data: {
                    coordinate: longitudeLatitude,
                    deptId: deptId,
                    userName: userName,
                    merchantType: merchantType,
                    startTime: startTime,
                    endTime: endTime,
                },
                async: false,
                success: function (data) {
                    var result = data.data;
                    $.each(result, function (i, val) {
                        if (val.merchantType == '1'){
                            markerArr.push({
                                id: val.id,
                                title: "个人名称：" + val.handName,
                                handName: val.handName,
                                coordinate: val.coordinate.split(",")[1] + "," + val.coordinate.split(",")[0],
                                address: val.mapAddress,
                                headPic: val.headPic,
                                merchantType: val.merchantType
                            });
                        } else if (val.merchantType == '2'){
                            markerArr.push({
                                id: val.id,
                                title: "商户名称：" + val.handName,
                                handName: val.handName,
                                coordinate: val.coordinate.split(",")[1] + "," + val.coordinate.split(",")[0],
                                address: val.mapAddress,
                                headPic: val.headPic,
                                merchantType: val.merchantType
                            });
                        } else if (val.merchantType == '3'){
                            markerArr.push({
                                id: val.id,
                                title: "企业名称：" + val.handName,
                                handName: val.handName,
                                coordinate: val.coordinate.split(",")[1] + "," + val.coordinate.split(",")[0],
                                address: val.mapAddress,
                                headPic: val.headPic,
                                merchantType: val.merchantType
                            });
                        } else if (val.merchantType == '4'){
                            markerArr.push({
                                id: val.id,
                                title: "农业名称：" + val.handName,
                                handName: val.handName,
                                coordinate: val.coordinate.split(",")[1] + "," + val.coordinate.split(",")[0],
                                address: val.mapAddress,
                                headPic: val.headPic,
                                merchantType: val.merchantType
                            });
                        }
                    });
                    if (isClusterer != 0) {
                        labelIcon('1');//添加标注点和标签
                    }
                }
            });
        }

        //初始化生成各网点网格
        function getBoundary() {
            //查询网格划分坐标点集合
            $.ajax({
                url: prefix + "/getBoundaryCoordinate",
                type: 'get',
                async: false,
                success: function (data) {
                    var result = data.data;
                    $.each(result, function (i, val) {
                        var mapGridCoordinate = val.mapGridCoordinate;
                        if (mapGridCoordinate != undefined && mapGridCoordinate != 'undefined' &&
                            mapGridCoordinate != null && mapGridCoordinate != 'null' &&
                            mapGridCoordinate != '') {
                            areas.push(mapGridCoordinate);
                        }
                    });
                }
            });

            colors = ["#fff492", "#46eed5", "#98d057", "#e19ee6",
                "#1ad3da", "#ffc11d", "#98e800", "#b95817",
                "#03a9f4","#39d0a4", "#8bbb53", "#98e800",
                "#b95817", "#03a9f4", "#39d0a4", "#07bfe1",
                "#fff492", "#fff492", "#98d057", "#e19ee6",
                "#e19ee6", "#1ad3da", "#ffc11d", "#1ad3da"
            ];

            var pointArrayBoundary = [];
            //由于机构有很多个，颜色不一一设置了，当达到颜色集合最后一个时从头开始循环
            var j = 0;
            for (var i = 0; i < areas.length; i++) {
                var ply = new BMap.Polygon(areas[i], {
                    strokeStyle: 'dashed', //边线的样式，solid或dashed
                    fillColor: 'rgba(0,0,0,0)', //填充颜色控制
                    strokeWeight: 2, //边线的宽度
                    strokeColor: "rgba(0,0,0,0.22)", //边线颜色
                    strokeOpacity: 10
                }); //不透明度
                if (j == 23){
                    j = 0;
                }
                ply.setFillColor(colors[j]);  //设置多边形的填充颜色
                ply.setFillOpacity(0.2); //设置多边形的填充颜色的不透明度
                polygons.push(ply);  //加入多边形数组，以之后获取多边形边界点集
                map.addOverlay(ply);  //添加覆盖物
                pointArrayBoundary = pointArrayBoundary.concat(ply.getPath());
                j++;
            }
            // map.setViewport(pointArrayBoundary);    //调整视野
            addlabel();//添加划分区域的对应名称
        }

        //初始化生成点聚合
        function getMarkerClusterer(){
            //生成一个marker数组，然后调用markerClusterer类即可，点聚合实现
            markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers, minClusterSize: 100});
        }

        //地图拖拽事件（拖拽开始调用）
        map.addEventListener("dragstart", function () {
            LayerShow();
        });

        //地图拖拽事件（拖拽结束调用）
        map.addEventListener("dragend", function () {
            center = map.getCenter();//地图中心点坐标
            zoom = this.getZoom();//地图缩放级别
            inceptionlonLat = center.lng + ',' + center.lat;
            defaultPointLon = center.lng;
            defaultPointLat = center.lat;
            dragClusterer();//根据范围展示标注点
            console.log("地图中心点变更为：" + center.lng + ", " + center.lat);
            LayerHide();
        });

        //地图缩放事件
        map.addEventListener("zoomend", function () {
            center = map.getCenter();//地图中心点坐标
            zoom = this.getZoom();//地图缩放级别
            inceptionlonLat = center.lng + ',' + center.lat;
            addClusterer();//添加点聚合
            defaultPointLon = center.lng;
            defaultPointLat = center.lat;
            console.log("地图中心点变更为：" + center.lng + ", " + center.lat);
            console.log("地图缩放至：" + this.getZoom() + "级");
        });

        //添加点聚合
        function addClusterer() {
            if (isClusterer != 0){//平铺,12-17级展示点聚合，18级时展示标注点
                LayerShow();
                clearLabels();//清除标签和标注点
                /*markerClusterer.clearMarkers(markers);*/// 清除所有的标记
                if (isCircleFlag){//是否开启范围圈以及跟随范围圈移动的标注点
                    getCircle();//创建范围圆
                    getLabelIcon(new BMap.Point(center.lng, center.lat));//创建标注图标，跟着范围圈动
                }
                markerArr = [];//商户集合置为空，重新查询范围内的商户
                getCommercial();//获取范围内的商户
                labelIcon('1');//添加标注点和标签
            } else {//聚合点
                if (zoom == 18) {
                    LayerShow();
                    clearLabels();//清除标签和标注点
                    markerClusterer.clearMarkers(markers);// 清除所有的标记
                    if (isCircleFlag){//是否开启范围圈以及跟随范围圈移动的标注点
                        getCircle();//创建范围圆
                        getLabelIcon(new BMap.Point(center.lng, center.lat));//创建标注图标，跟着范围圈动
                    }
                    markerArr = [];//商户集合置为空，重新查询范围内的商户
                    getCommercial(inceptionlonLat);//获取范围内的商户
                    labelIcon('1');//添加标注点和标签
                } else if (zoom == 12) {
                    showMarkerClustererByzoom(100);
                } else if (zoom == 13) {
                    showMarkerClustererByzoom(50);
                } else if (zoom == 14) {
                    showMarkerClustererByzoom(30);
                } else if (zoom == 15) {
                    showMarkerClustererByzoom(20);
                } else if (zoom == 16) {
                    showMarkerClustererByzoom(10);
                } else if (zoom == 17) {
                    showMarkerClustererByzoom(2);
                }
            }
        }

        //缩放等级18级时的拖拽事件，根据范围展示标注点
        function dragClusterer() {
            if (zoom == 18){
                clearLabels();//清除标签和标注点
                if (isCircleFlag){//是否开启范围圈以及跟随范围圈移动的标注点
                    map.removeOverlay(markerRadius);//移除标注图标
                    map.removeOverlay(circle);//移除范围圆
                    getCircle();//创建范围圆
                    getLabelIcon(new BMap.Point(center.lng, center.lat));//创建标注图标，跟着范围圈动
                }
                markerArr = [];//商户集合置为空，重新查询范围内的商户
                getCommercial(inceptionlonLat);//获取范围内的商户
                labelIcon('1');//添加标注点和标签
            }
        }

        //根据缩放等级展示不同范围的点聚合
        function showMarkerClustererByzoom(size) {
            clearLabels();//清除所有标签和标注点
            markerClusterer.clearMarkers(markers);// 清除所有的标记
            if (isCircleFlag){//是否开启范围圈以及跟随范围圈移动的标注点
                map.removeOverlay(markerRadius);//移除标注图标
                map.removeOverlay(circle);
            }
            //生成一个marker数组，然后调用markerClusterer类即可，点聚合实现
            var markerClust = markerClusterer._markers;
            if (markerClust == '' || markerClust == undefined || markerClust.length == 0) {
                markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers, minClusterSize: size});
            }
        }

        //创建范围圆方法
        function getCircle() {
            //创建圆
            circle = new BMap.Circle(new BMap.Point(center.lng, center.lat) , 300, {
                strokeColor: "blue",
                strokeWeight: 1,
                fillColor: 'rgba(229,239,255,0.9)', //填充颜色控制
                strokeOpacity: 0.5
            });
            map.addOverlay(circle);
        }

        //创建标注图标，跟着范围圈动
        function getLabelIcon(point){
            var myIconRadius = new BMap.Icon("../../../img/markerB.png",
                new BMap.Size(40, 50), {
                    offset: new BMap.Size(30, 40),
                    // 设置图片偏移
                    imageOffset: new BMap.Size(0, 0),
                    // 指定定位位置
                    anchor: new BMap.Size(12, 26)

                });
            markerRadius = new BMap.Marker(point, {icon: myIconRadius});// 创建标注
            map.addOverlay(markerRadius);
        }

        //添加网点网格对应名称
        function addlabel() {
            var pointArrayLabel = [];//网格坐标
            var contentArray = [];//网格名称
            var deptIdArray = [];//部门id
            //获取网格名称和经纬度
            $.ajax({
                url: prefix + "/getGridAndCoordinate",
                type: 'get',
                async: false,
                success: function (data) {
                    var result = data.data;
                    $.each(result, function (i, val) {
                        if (val.mapCoordinate != undefined && val.mapCoordinate != '') {
                            var lon = val.mapCoordinate.split(",")[1];//经度（左右移动）
                            var lat = val.mapCoordinate.split(",")[0];//纬度（上下移动）
                            pointArrayLabel.push(new BMap.Point(lon, lat));
                            contentArray.push(val.deptName);
                            deptIdArray.push(val.deptId);
                        }
                    });
                }
            });
            //根据网格名称查询建档商户数量和拜访次数
            var optsArray = [];
            var jxLogo = '<img style="line-height: normal" src="../../../logo/jx.png" width="13" height="13">&nbsp;';
            $.ajax({
                url: prefix + "/getFilingVisitCount",
                type: 'get',
                async: false,
                success: function (data) {
                    var result = data.data;
                    var j = 0;
                    $.each(result, function (i, val) {
                        if (val.mapCoordinate != undefined && val.mapCoordinate != ''){
                            optsArray.position = pointArrayLabel[j];
                            // var merchantNum = val.merchantNum;//建档商户数量
                            // var visitSum = val.visitSum;//拜访次数
                            var deptName = val.deptName;//网格名称
                            var deptId = val.deptId;//机构id
                            // labelArray[j] = new BMap.Label(jxLogo + deptName + '<br>（' + merchantNum + ',' + visitSum + '）', optsArray);
                            labelArray[j] = new BMap.Label('<img style="line-height: normal" src="' + val.mapLogo + '" width="13" height="13">&nbsp;' + deptName + '<br>&nbsp;&nbsp;&nbsp;&nbsp;（' + "详情" + '）', optsArray);
                            labelArray[j].wgmc = deptId;
                            labelArray[j].setStyle({
                                color: "#2957d3",//字体颜色
                                fontSize: "11px",//字体大小
                                border: "0px solid #1E90FF",//边框样式
                                height: "Auto",//边框高度
                                width: "Auto",//边框宽度
                                borderRadius: "13%",//边框半径
                                lineHeight: "15px",
                                // backgroundColor: "rgba(255,255,255,0.12)",
                                // fontWeight :"bold",//字体加粗
                                textAlign: "center",//字体居中
                                fontFamily: "微软雅黑"//字体样式
                            });
                            map.addOverlay(labelArray[j]);
                            j++;
                        }
                    });
                }
            });
            //循环给地点标注添加点击事件
            labelClick();
        }

        //循环给各网格名称标注添加点击事件
        function labelClick() {
            $.each(labelArray, function (index, value) {
                labelArray[index].addEventListener("onclick", function () {
                    ysqBranchMerchant(labelArray[index].wgmc);
                });
            });
        }

        //初始化商户标注点，标注图标
        function labelIcon(type) {
            for (var i = 0; i < markerArr.length; i++) {
                var p0 = markerArr[i].coordinate.split(",")[0];//经度（左右移动）
                var p1 = markerArr[i].coordinate.split(",")[1];//纬度（上下移动）
                coordinate = new BMap.Point(p0, p1);
                if (markerArr[i].merchantType == '1'){
                    //标注图标
                    var myIcon = new BMap.Icon("../../../img/markerMer.png",
                        new BMap.Size(40, 50), {
                            offset: new BMap.Size(30, 40),
                            // 设置图片偏移
                            imageOffset: new BMap.Size(0, 0),
                            // 指定定位位置
                            anchor: new BMap.Size(8, 20)
                        });
                } else if (markerArr[i].merchantType == '2'){
                    //标注图标
                    var myIcon = new BMap.Icon("../../../img/markerMer.png",
                        new BMap.Size(40, 50), {
                            offset: new BMap.Size(30, 40),
                            // 设置图片偏移
                            imageOffset: new BMap.Size(0, 0),
                            // 指定定位位置
                            anchor: new BMap.Size(8, 20)
                        });
                } else if (markerArr[i].merchantType == '3'){
                    //标注图标
                    var myIcon = new BMap.Icon("../../../img/markerMer.png",
                        new BMap.Size(40, 50), {
                            offset: new BMap.Size(30, 40),
                            // 设置图片偏移
                            imageOffset: new BMap.Size(0, 0),
                            // 指定定位位置
                            anchor: new BMap.Size(8, 20)
                        });
                } else if (markerArr[i].merchantType == '4'){
                    //标注图标
                    var myIcon = new BMap.Icon("../../../img/markerMer.png",
                        new BMap.Size(40, 50), {
                            offset: new BMap.Size(30, 40),
                            // 设置图片偏移
                            imageOffset: new BMap.Size(0, 0),
                            // 指定定位位置
                            anchor: new BMap.Size(8, 20)
                        });
                }
                marker = new BMap.Marker(coordinate, {icon: myIcon});// 创建标注
                marker.name = 'labelObject';

                addInfoWindow(marker, markerArr[i], i);

                //处理坐标点标注商户名称
                pointArray[i] = new BMap.Label(markerArr[i].handName,
                    {
                        offset: new BMap.Size(-20, -50),//label的偏移量，为了让label的中心显示在点上
                        position: coordinate
                    });
                //设置标注商户名称样式
                pointArray[i].setStyle({
                    color: "#000000",//字体颜色
                    fontSize: "12px",//字体大小
                    border: "0px solid #1E90FF",//边框样式
                    height: "Auto",//边框高度
                    width: "Auto",//边框宽度
                    borderRadius: "13%",//边框半径
                    lineHeight: "20px",
                    // fontWeight :"bold",//字体加粗
                    textAlign: "center",//字体居中
                    fontFamily: "微软雅黑"//字体样式
                });
                if (type == '1') {
                    map.addOverlay(marker);//标注点
                    //暂时去掉
                    // map.addOverlay(pointArray[i]);//标签
                    LayerHide();
                }
                if (type == '0') {
                    markers.push(marker);//标注点
                }
            }
            LayerHide();
        }

        // 清除所有标签和标注点的函数
        function clearLabels() {
            //删除指定名称的标注点
            var allOverlay = map.getOverlays();
            allOverlay.map(item => {
                if (item.name == 'labelObject') {
                    map.removeOverlay(item);
                }
            });
            for (var i = 0; i < pointArray.length; i++) {
                map.removeOverlay(pointArray[i]);//清除标签
            }
            pointArray = []; //清空数组
        }

        //添加商户标注点信息窗口，初始化地图时调用这个方法
        function addInfoWindow(marker, poi) {
            //pop弹窗标题
            var title = '<div style="font-weight:bold;color:#CE5521;font-size:15px">' + poi.title + '</div>';
            //pop弹窗信息
            var html = [];
            html.push('<table cellspacing="0" style="table-layout:fixed;width:auto;font:12px arial,simsun,sans-serif"><tbody>');
            html.push('<tr>');
            html.push('<td style="vertical-align:top;line-height:16px;font-size:13px;width:5px;white-space:normal;word-break:keep-all">地址：' + poi.address + '</td>');
            html.push('</tr>');
            html.push('<tr>');
            if (poi.merchantType == '1'){
                html.push('<td style="vertical-align:top;line-height:16px;width:auto;white-space:nowrap;word-break:keep-all">' +
                    '<a href="javascript:void(0)" style="font-weight:bold;color:#006ece;font-size:13px" onclick="detailInfo(1)">点击进入个人详情</a>' +
                    ' </td>');
            } else if (poi.merchantType == '2'){
                html.push('<td style="vertical-align:top;line-height:16px;width:auto;white-space:nowrap;word-break:keep-all">' +
                    '<a href="javascript:void(0)" style="font-weight:bold;color:#006ece;font-size:13px" onclick="detailInfo(2)">点击进入商户详情</a>' +
                    ' </td>');
            } else if (poi.merchantType == '3'){
                html.push('<td style="vertical-align:top;line-height:16px;width:auto;white-space:nowrap;word-break:keep-all">' +
                    '<a href="javascript:void(0)" style="font-weight:bold;color:#006ece;font-size:13px" onclick="detailInfo(3)">点击进入企业详情</a>' +
                    ' </td>');
            } else if (poi.merchantType == '4'){
                html.push('<td style="vertical-align:top;line-height:16px;width:auto;white-space:nowrap;word-break:keep-all">' +
                    '<a href="javascript:void(0)" style="font-weight:bold;color:#006ece;font-size:13px" onclick="detailInfo(4)">点击进入农业详情</a>' +
                    ' </td>');
            }

            html.push('<span id="ysqId" hidden="hidden">' + poi.id + '</span>');
            html.push('</tr>');
            html.push('<tr>');
            html.push('<td style="vertical-align:top;line-height:16px;font-size:13px;width:auto;white-space:nowrap;word-break:keep-all">' + '门头图片：' + ' </td>');
            html.push('</tr>');
            html.push('<tr>');
            html.push('<td style="vertical-align:top;line-height:16px">' + '<img src="' + poi.headPic + '" width="166" height="100">' + ' </td>');
            html.push('</tr>');
            html.push('</tbody></table>');
            var infoWindow = new BMap.InfoWindow(html.join(""), {title: title, width: 100});

            var openInfoWinFun = function () {
                marker.openInfoWindow(infoWindow);
            };
            marker.addEventListener("mouseover", openInfoWinFun);//开启信息窗口
            marker.addEventListener("mouseout", throttle(function (event) {
                marker.closeInfoWindow(infoWindow); //关闭信息窗口
            }, 100));
            return openInfoWinFun;
        }

        function throttle(fn, wait) {
            var lastTime = 0;
            return function () {
                var nowTime = +new Date();
                if (nowTime - lastTime > wait) {
                    fn.apply(this, arguments);
                    lastTime = nowTime;
                }
            }
        }

        map.addEventListener('click', function (e) {
            console.log("鼠标点击所在的经纬度：" + e.point.lng + ',' + e.point.lat);
        });
        console.log("初始定位成功，经纬度：116.76986,35.565602");
        LayerHide();
    }

    //触发遮罩层
    function LayerShow() {
        $("#loading").css("display","block");
    }

    //隐藏遮罩层
    function LayerHide() {
        $("#loading").css("display","none");
    }

    //点击跳转详情
    function detailInfo(merchantType) {
        var ysqId = $("#ysqId").html();
        if (merchantType == '1'){
            var url = prefix + '/ysqPerson/' + ysqId;
            $.modal.open("云商圈个人信息", url, '1400', '700');
        } else if (merchantType == '2'){
            var url = prefix + '/ysqMerchant/' + ysqId;
            $.modal.open("云商圈商户信息", url, '1400', '700');
        } else if (merchantType == '3'){
            var url = prefix + '/ysqEnterprise/' + ysqId;
            $.modal.open("云商圈企业信息", url, '1400', '700');
        } else if (merchantType == '4'){
            var url = prefix + '/ysqAgriculture/' + ysqId;
            $.modal.open("云商圈农业信息", url, '1400', '700');
        }

    }

    //点击跳转网点商户统计
    function ysqBranchMerchant(deptId) {
        var url = prefix + '/ysqBranchMerchant/' + deptId;
        $.modal.open("云商圈网点商户统计", url, '1400', '700');
    }

    //重置搜索条件
    function reset() {
        $('#treeId').val('')
        $.form.reset();
        getLocation();
    }
</script>
</body>
</html>